<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    
    <title>FMP4不支持直播 | xilixili.net</title>
    <meta name="renderer" content="webkit">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <meta name="description" content="因为在直播中，H5侧目前主要是B站的 flv.js 这个项目来做FLV的直播，但是H5原生支持MP4，而且SRS等均只输出简单的FLV视频。因此可以考虑尝试使用直接输出MP4的方法来实现，这样就可以跳过很多控制，直接原生支持，结果验证失败了。
测试前思考想要输出MP4，势必先要了解MP4的格式，然后再remux，CSDN的这篇博客是我的主要参考
软编码Flv 到Mp4 容器
作者主要是从事类似 f">

    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="FMP4不支持直播 | xilixili.net">
    <meta name="twitter:description" content="因为在直播中，H5侧目前主要是B站的 flv.js 这个项目来做FLV的直播，但是H5原生支持MP4，而且SRS等均只输出简单的FLV视频。因此可以考虑尝试使用直接输出MP4的方法来实现，这样就可以跳过很多控制，直接原生支持，结果验证失败了。
测试前思考想要输出MP4，势必先要了解MP4的格式，然后再remux，CSDN的这篇博客是我的主要参考
软编码Flv 到Mp4 容器
作者主要是从事类似 f">

    <meta property="og:type" content="article">
    <meta property="og:title" content="FMP4不支持直播 | xilixili.net">
    <meta property="og:description" content="因为在直播中，H5侧目前主要是B站的 flv.js 这个项目来做FLV的直播，但是H5原生支持MP4，而且SRS等均只输出简单的FLV视频。因此可以考虑尝试使用直接输出MP4的方法来实现，这样就可以跳过很多控制，直接原生支持，结果验证失败了。
测试前思考想要输出MP4，势必先要了解MP4的格式，然后再remux，CSDN的这篇博客是我的主要参考
软编码Flv 到Mp4 容器
作者主要是从事类似 f">

    
    <meta name="author" content="rangerlee">
    
    <link rel="stylesheet" href="/css/vno.css">
    <link rel="stylesheet" href="/css/font-awesome.min.css">

    
    <link rel="icon" href="/images/avatar-small.png">
    

    <meta name="generator" content="hexo"/>
    
    <link rel="alternate" type="application/rss+xml" title="xilixili.net" href="/atom.xml">
    

    <link rel="canonical" href="xilixili.net/2019/10/30/fmp4-unsupport-live/"/>

                 
</head>

<body class="home-template no-js">
    <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="/js/main.js"></script>
    <span class="mobile btn-mobile-menu">
        <i class="fa fa-list btn-mobile-menu__icon"></i>
        <i class="fa fa-angle-up btn-mobile-close__icon hidden"></i>
    </span>

    
<header class="panel-cover panel-cover--collapsed">
  <div class="panel-main">
    <div class="panel-main__inner panel-inverted">
    <div class="panel-main__content">

        <h1 class="panel-cover__title panel-title"><a href="/" title="访问首页 xilixili.net">xilixili.net</a></h1>
        
        <span class="panel-cover__subtitle panel-subtitle"><!-- 生活と技术の杂记 --></span>
        
        <hr class="panel-cover__divider">
        
        <p class="panel-cover__description">生活と技术の杂记</p>
        
	<hr class="panel-cover__divider panel-cover__divider--secondary">

        <div class="navigation-wrapper">
          <div>
          <nav class="cover-navigation cover-navigation--primary">
            <ul class="navigation">
              <li class="navigation__item"><a href="/#blog" title="访问博客" class="blog-button">博客</a></li>
            
            </ul>
          </nav>
          </div>
          <div>
          <nav class="cover-navigation navigation--social">
  <ul class="navigation">

  <!-- Weibo-->
  

  <!-- Github -->
  
  <li class="navigation__item">
    <a href="https://github.com/rangerlee" title="查看我的GitHub主页" target="_blank">
      <i class="social fa fa-github"></i>
      <span class="label">Github</span>
    </a>
  </li>


<!-- Stack Overflow -->
        

  <!-- Google Plus -->
  

<!-- Facebook -->

  
<!-- Twitter -->

  

  <li class="navigation__item">
    <a href="/atom.xml" title="RSS" target="_blank">
      <i class="social fa fa-rss"></i>
      <span class="label">RSS</span>
    </a>
  </li>


  <li class="navigation__item">
    <a href="mailto:http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=RzUmKSAiNSsiIgchKD8qJi4raSQoKg" title="邮件联系我" target="_blank">
      <i class="social fa fa-envelope"></i>
      <span class="label">Email</span>
    </a>
  </li>


  </ul>
</nav>

          </div>
        </div>

      </div>

    </div>

    <div class="panel-cover--overlay cover-alpha"></div>
  </div> 
</header>
<script type="text/javascript">
var side = document.getElementsByClassName("panel-cover")[0];
function checkWebp() {
	try{
		return(document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
	}catch(err) {
		return false;
	}
};

if(checkWebp()) {
	side.style.backgroundImage = "url('/images/background-cover.jpg.webp')";
} else {
	side.style.backgroundImage = "url('/images/background-cover.jpg')";
}
</script>


    <div class="content-wrapper">
        <div class="content-wrapper__inner">
            <article class="post-container post-container--single">

  <header class="post-header">
    <div class="post-meta">
      <time datetime="2019-10-30T09:37:00.000Z" class="post-list__meta--date date">2019-10-30</time> &#8226; <span class="post-meta__tags tags">
  <a class="tag-link" href="/tags/技术/">技术</a>
 </span>
      <span class="page-pv">
       阅读 <span id="busuanzi_value_page_pv"><i class="fa fa-spinner fa-spin"></i></span>
      </span> 
   
    </div>
    <h1 class="post-title">FMP4不支持直播</h1>
  </header>

  <section class="post">
    <p>因为在直播中，H5侧目前主要是B站的 <code>flv.js</code> 这个项目来做FLV的直播，但是H5原生支持MP4，而且SRS等均只输出简单的FLV视频。因此可以考虑尝试使用直接输出MP4的方法来实现，这样就可以跳过很多控制，直接原生支持，结果验证失败了。</p>
<h3 id="测试前思考"><a href="#测试前思考" class="headerlink" title="测试前思考"></a>测试前思考</h3><p>想要输出MP4，势必先要了解MP4的格式，然后再remux，CSDN的这篇博客是我的主要参考</p>
<p><a href="https://blog.csdn.net/g332065255/article/details/71158863" target="_blank" rel="noopener">软编码Flv 到Mp4 容器</a></p>
<p>作者主要是从事类似 <code>flv.js</code> 这样通过JS进行的转换操作，我只需要用C++实现格式即可。</p>
<p>通过简单了解，大概可以确认直接使用MP4格式是不行的，因为在MP4的开始的 <code>moov</code> 就记录了视频的所有帧，显然在直播中是不行的。好在MP4还有一种格式，号称是适应网络的，流式的，也就是我们所说的FMP4格式。显然在直播服务器上需要实时生成视频文件，只能选择FMP4格式。</p>
<h3 id="编写测试程序"><a href="#编写测试程序" class="headerlink" title="编写测试程序"></a>编写测试程序</h3><p>编写测试程序没什么好说的，参照上面的博客进行实现即可。但是有两点需要注意：</p>
<ul>
<li>每个box的大小是包含开始的size在内的</li>
<li><code>turn</code>记录的包大小也是包含size在内的</li>
</ul>
<p>程序流程就是在开始先获取到 <code>AVCDecoderConfigurationRecord</code> 解析出SPS，并且从SPS中解析出宽高后就开始合成 <code>ftyp</code> 和 <code>moov</code>, 后面就一直合成 <code>moof</code> 和 <code>mdat</code> 对即可。</p>
<p>因为我面对的是视频监控，直接忽略音频相关，相对会少一些工作量。</p>
<h3 id="程序测试"><a href="#程序测试" class="headerlink" title="程序测试"></a>程序测试</h3><p>花两三天就搞定测试程序，测试程序通过HTTP进行输出，在调试阶段通过 <code>curl</code> 工具保存文件，然后使用桌面播放器进行播放，确认合成的格式是正常的。如果有问题，配合 <code>MP4 Reader</code> 这个工具进行解析分析。</p>
<p>测试正常之后，开始通过H5的 <code>&lt;video&gt;</code> 标签进行播放，<kbd>F12</kbd> 进行查看。可以发现以下现象和问题：</p>
<ul>
<li>视频无法播放，一直在等待</li>
<li>视频有两次下载，第一次仅下载非常小的量</li>
<li>视频第二次一直下载，不结束</li>
<li>停止服务器端，视频开始正常播放</li>
</ul>
<p>通过以上现象，基本可以分析得出浏览器是通过下载整个视频进行播放的，这和流式不流式没什么关系。然后再在HTTP服务器上放一个通过工具转码的FMP4文件，可以发现浏览器分块下载播放，也不是流式的。</p>
<h3 id="总结分析"><a href="#总结分析" class="headerlink" title="总结分析"></a>总结分析</h3><p>MP4不能直播，至少现阶段浏览器是不支持的！</p>
<p>至于现在流行的H5的MSE方法，我没有写过代码，但是听说其有一些限制。</p>
<ul>
<li>浏览器支持不一致（问题不太大）</li>
<li>必须使用FMP4格式封装输入</li>
<li>每次必须一个GOP输入（未确认）</li>
<li>音视频格式有限制（问题不大）</li>
</ul>
<p>如果想要使用H5直播，现阶段最简单的方案就是 <code>flv.js</code>,而且FLV文件本身格式比MP4简单太多，浏览器也不支持MP4直播，还不如使用简单的FLV格式。<br>另外还有就是WebRTC直播，不过技术含量有些高以及其他一些原因，没有大量普及。不过虎牙已经在使用了，而且貌似是P2P。</p>

  </section>

</article>

<section class="read-more">
           
    
               
            <div class="read-more-item">
                <span class="read-more-item-dim">最近的文章</span>
                <h2 class="post-list__post-title post-title"><a href="/2019/11/14/build-webrtc/" title="编译WebRTC源码(2019年11月)">编译WebRTC源码(2019年11月)</a></h2>
                <p class="excerpt">
                
                最近又打算调试下 WebRTC 的问题，苦于半天找不到网上可以下载的工程，打算自己编译，虽然官网可以访问了，但是源码依然无法下载，在某博客发现博主分享了SS账号，使用其进行下载。
不翻墙方法
https://webrtc.org.cn/mirror/
https://zhuanlan.zhihu.c
                &hellip;
                </p>
                <div class="post-list__meta"><time datetime="2019-11-14T06:15:00.000Z" class="post-list__meta--date date">2019-11-14</time> &#8226; <span class="post-list__meta--tags tags">
  <a class="tag-link" href="/tags/技术/">技术</a>
</span><a class="btn-border-small" href="/2019/11/14/build-webrtc/">继续阅读</a></div>
                           
            </div>
        
        
               
            <div class="read-more-item">
                <span class="read-more-item-dim">更早的文章</span>
                <h2 class="post-list__post-title post-title"><a href="/2019/10/23/parse-hikvision-camera-ps-stream-supplement/" title="从海康28181的PS流解析H264的补充">从海康28181的PS流解析H264的补充</a></h2>
                <p class="excerpt">
                
                前文 《简单解析海康PS流获取H264》 针对海康摄像头的PS流解析做了简单处理，基本逻辑是正确的，但最近几个摄像头出现了一些奇怪的问题，需要针对相关现象进行查询。
RTP传输层项目中为了可靠处理且因其他原因使用了TCP来传输28181的RTP数据，根据 rfc4571 记录，使用TCP传输的时候只
                &hellip;
                </p>
                <div class="post-list__meta"><time datetime="2019-10-23T05:53:00.000Z" class="post-list__meta--date date">2019-10-23</time> &#8226; <span class="post-list__meta--tags tags">
  <a class="tag-link" href="/tags/技术/">技术</a>
</span><a class="btn-border-small" href="/2019/10/23/parse-hikvision-camera-ps-stream-supplement/">继续阅读</a></div>
                       
            </div>
        
     
   
   
  
</section>



	<script>
	(function(){
		var bp = document.createElement('script');
		var curProtocol = window.location.protocol.split(':')[0];
		if (curProtocol === 'https') {
			bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
		}
		else {
			bp.src = 'http://push.zhanzhang.baidu.com/push.js';
		}
		var s = document.getElementsByTagName("script")[0];
		s.parentNode.insertBefore(bp, s);
	})();
	</script>



<script>
(function(){
var src = (document.location.protocol == "http:") ? "http://js.passport.qihucdn.com/11.0.1.js?8612a7fa26d7ba4562be733ae33649b1":"https://jspassport.ssl.qhimg.com/11.0.1.js?8612a7fa26d7ba4562be733ae33649b1";
document.write('<script src="' + src + '" id="sozz"><\/script>');
})();
</script>



            <footer class="footer">
    <span class="footer__copyright">
        &copy; 2023 rangerlee - 本站点采用 <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a>
       
    </span>
    <span class="footer__copyright">
             - 本站基于开源 <a href="http://hexo.io">Hexo</a> 搭建，采用 <a href="https://github.com/rangerlee/hexo-theme-new-vno">hexo-theme-new-vno</a> 主题，修改自 <a href="https://github.com/monniya/hexo-theme-new-vno ">new-vno</a> 主题  <a href="http://www.beian.miit.gov.cn">皖ICP备16009457号</a>
         </span>
       
    
    
</footer>


        </div>
    </div>

     
    
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "//hm.baidu.com/hm.js?bab4f71524319c10819bcae280021624";
            var s = document.getElementsByTagName("script")[0]; 
            s.parentNode.insertBefore(hm, s);
        })();
    </script>



    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    
    
</body>
</html>
